<template>
	<view class="content">
		<view class="title" v-if="list.length > 0" >选择仪器</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<text :class="{cur:item.num > 0}">{{item.name}} ({{item.num}})</text>
				<view class="steps">
					<!-- <image @tap="minus(index)" src="/static/img/minus.png" mode="widthFix"></image> -->
					<text>{{item.num}}</text>
					<image @tap="plus(index)" src="/static/img/plus.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<wanl-empty   v-if="list.length == 0" text="暂无设备"></wanl-empty>

		<view class="btn" v-if="list.length > 0" @tap="submit">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					// {
					// 	name: '呼吸机',
					// 	num: 1
					// },
					// {
					// 	name: '监护仪',
					// 	num: 0
					// },
					// {
					// 	name: '微量泵',
					// 	num: 2
					// },
					// {
					// 	name: '吸氧',
					// 	num: 0
					// },
					// {
					// 	name: '吸痰器',
					// 	num: 0
					// },
					// {
					// 	name: '氧气管',
					// 	num: 0
					// },
					// {
					// 	name: '一次性被褥',
					// 	num: 0
					// },
					// {
					// 	name: '医生',
					// 	num: 0
					// },
					// {
					// 	name: '护士',
					// 	num: 0
					// },
					// {
					// 	name: '急救箱',
					// 	num: 0
					// }
				],
				value:0,
				order_id:0,
				type:''
			}
		},
		onShow() {
			let pagearr = getCurrentPages(); //获取应用页面栈
			let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
			let option = currentPage.options
			this.order_id = option.order_id
			this.type = option.type
			this.$http('/addons/ddrive/sforder/equipment_list', {
				type: option.type
			}, "POST").then((res) => {
				res.forEach(item => {
					item.num = 0
				})
				this.list = res
				this.getList()
			})
			
		},
		methods: {
			getList(){
				this.$http('/addons/ddrive/sforder/get_order_equipment', {
					order_id:this.order_id
				}, "POST").then((res) => {
					console.log('123',res);
					// res.forEach(item => {
					// 	item.num = 0
					// })
					// this.list = res
					console.log(res.length);
					for (let i=0;i<res.length;i++){
					
						this.list[i].num = res[i].num
					 
					}
				})
			},
			submit() {
				let lists = this.list;
				var equipments = ''
				lists.forEach((item,index) => {
					if(item.num > 0) {
						equipments += item.id + ':' + item.num + ','
					}
				})
				this.$http('/addons/ddrive/order/appendEquipments', {
					// equipments:JSON.stringify(equipments),
					equipments:equipments,
					order_id:this.order_id
				}, "POST").then((res) => {
					this.$wanlshop.to(`/pages/user/money/pay?type=append_equipments&token=&id=${res}`);
				})
				return false;
				// console.log(equipments.substring(0,equipments.length-1),2)
				// this.$http('/addons/ddrive/sforder/edit_order_equipment', {
				// 	// equipments:JSON.stringify(equipments),
				// 	equipments:equipments,
				// 	order_id:this.order_id
				// }, "POST").then((res) => {
				// 	uni.navigateBack({
				// 		delta: 1
				// 	})
				// })
			},
			addPlus(index){
				this.list[index].num += 1
			},
			plus(index) {
				this.list[index].num += 1
			},
			minus(index) {
				if(this.list[index].num > 0) {
					this.list[index].num -= 1
				}
			}
		}
	}
</script>

<style lang="less">
.content {
	padding: 0 30rpx;
	.title {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #333333;
		padding-top: 32rpx;
		margin-bottom: 42rpx;
	}
}
.list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.item {
		width: calc((100% - 80rpx) / 3);
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-bottom: 44rpx;
		> text {
			width: 100%;
			text-align: center;
			padding: 20rpx 0;
			background: #F1F1F1;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #555555;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			&.cur {
				background-color: #BEEDD6;
				color: #379F6D;
			}
		}
		.steps {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 24rpx;
			text {
				margin: 0 30rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #010101;
			}
			image {
				width: 50rpx;
			}
		}
	}
}
.btn {
	background: linear-gradient(90deg, #00B6B3, #00D396);
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	height: 100rpx;
	line-height: 100rpx;
	border-radius: 50rpx;
	text-align: center;
	margin: 0 40rpx;
}
</style>
